<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
<div class="layui-inline">
    <label class="layui-form-label">姓名：</label>
    <div class="layui-input-inline">
        <input type="text" name="stuName" id="stuName"   autocomplete="off" class="layui-input">
    </div>
    <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search"  id="selectName">查询</button>
    <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-add-circle-fine"  lay-event="add" id="addStuBtn" >增加一条数据</button>
    <button type="button" class="layui-btn layui-btn-danger  layui-icon layui-icon-delete"  lay-event="delete" id="deleteStuBtn">批量删除</button>
</div>

<!-- 表格行内toolbar -->
<div style="display: none;" id="barDemo">
    <a class="layui-btn layui-btn-xs  layui-icon layui-icon-edit"
       lay-event="edit">编辑</a> <a
        class="layui-btn layui-btn-danger  layui-btn-xs layui-icon layui-icon-delete"
        lay-event="del">删除</a>
</div>
<table class="layui-hide" id="demo" lay-filter="demo"></table>

<!-- 弹出层div(新增和修改) -->
<div id="mydiv"  style="display: none">
    <form  class="layui-form" lay-filter="dataform" id="dataform" method="post">
        <div class="layui-form-item" >
            <div class="layui-input-inline">
                <input type="hidden" name="stuId" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" >
            <label class="layui-form-label">学校名称：</label>
            <div class="layui-input-inline">
                <input type="text" name="stuName" required lay-verify="required"
                       autocomplete="off" placeholder="学校名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学校人数:</label>
            <div class="layui-input-inline">
                <input type="number"  min="1" max="120" name="stuAge" required lay-verify="required"
                       autocomplete="off" placeholder="学校人数" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">学生地址:</label>
            <div class="layui-input-inline">
                <select name="stuAddress">
                    <option value="">请选择</option>
                    <option value="湖南省" selected="">湖南省</option>
                    <option value="湖北省">湖北省</option>
                    <option value="江西省">江西省</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit=""
                        lay-filter="dosubmit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <script type="text/javascript">
        layui.use([ "element", "jquery", "layer", "form", "table" ], function(){
            var table = layui.table;
            var $ = layui.jquery;
            var element = layui.element;
            var layer = layui.layer;
            var form = layui.form;
            var table = layui.table;
            var url;
            var tanIndex;

            //展示已知数据
            var mytable= table.render({
                elem: '#demo'
                ,url:'getAllSchool'    //后端controller请求路径
                ,cols: [[ //标题栏
                    {field: 'schoolName', title: '学校名称', width: 180, sort: true}
                    , {field: 'number', title: '学校人数', width: 120}
                    , {field: 'address', title: '地址', minWidth: 150}
                    , {field: 'size', title: '大小', minWidth: 160}
                ]]

                //,skin: 'line' //表格风格
                ,even: true
                ,page: true //是否显示分页
                ,limits: [5, 7, 10]
                ,limit: '5' //每页默认显示的数量
            });

            $("#selectName").click(function () {
                mytable.reload({
                    page: {
                        curr: 1 //重新从第 1 页开始
                        , limit: 5
                    }
                    , method: 'GET'
                    , url: 'getAllSchool'
                    , where: {
                        schoolName: $("#schoolName").val() //参数 多个值,逗号隔开
                    }
                });
            });

            //新增学生
            $("#addStuBtn").click(function (){
                tanIndex= layer.open({
                    type:1,  //设置类型 默认为0 1 页面层 2 iframe层
                    title:'新增学生信息',  //标题
                    content:$("#mydiv"), //内容  type=0 的内容
                    skin:'layui-layer-molv',//skin - 样式类名
                    area:['400px'],  //area - 宽高
                    offset:[50,400],//offset - 坐标 默认：垂直水平居中
                    btnAlign:'c',//按钮排列
                    closeBtn:2,  //设置关闭按钮的样式 默认是1  0是没有 2
                    anim: 4,//设置动画
                    maxmin:true,//该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可
                    success:function(index){
                        url="addStudent";
                        //清空表单数据
                        $("#dataform")[0].reset();
                    }
                });
            });

            //新增form表单
            form.on("submit(dosubmit)",function(obj){
                //序列化表单数据
                var params=$("#dataform").serialize();
                $.post(url,params,function(data){
                    //刷新数据表格
                    mytable.reload();
                    //关闭弹出层
                    layer.close(tanIndex);
                });
                /*$.ajax({
                    type:"post",
                    url:url,
                    data:params,
                    success:function(data){
                        //刷新数据表格
                        myTableDemo.reload();
                        //关闭弹出层
                        layer.close(tanIndex);
                    }
                 });*/
            })
        });
    </script>
</div>

</body>
</html>
